<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06-Class与Style绑定</title>
</head>
<body>
  <div id="app1" :class='{active : isActive,"text-danger" : hasError }'>
     
  </div>
  <div id="app2" :class= 'hasClass'>

  </div>
  <div id="app3" v-bind:='classObject'>
    在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
  </div>
  <div id="app4" :='[activeClass,errorClass]'>
    这里是动态绑定Class类的数组语法
  </div>
  <div id="app5" :style='isStyle'>
     绑定内联样式
  </div>
  <div id="app6"
  
  >
     <h1>点击切换</h1>
     <ol :style='olStyle'
         :class='olClass'
     >
       <li 
       v-for=' (item,index) in items '
       v-bind:class='{isClass:currentIndex == index }'
       v-bind:style='isStyle'
       v-on:click='handleClick(index)'
       >
         {{ item.number }}
       </li>
     </ol>
     
  </div>
</body>
<style>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .Ol{
    justify-content: space-between;
    
  }
  .Oli{
    cursor: pointer;
    /* background-color: blue; */
  }
</style>
<script src="./vue1111.js"></script>
<script>
  //对象语法
  var App = new Vue({
    el:'#app1',
    data:{
      isActive:true,
      hasError:false
    }
  });

  //绑定的数据对象不必内联定义在模板里：
  var App2 = new Vue({
    el:'#app2',
    data:{
      hasClass:{
        active:true,
        'text-danger':true
      }
    }
  });

  // const App3 = new Vue({
  //   el:'#app3',
  //   data:{
  //     classObject:{
  //       isActive:true,
  //       error:null
  //     }
  //   },
  //   computed:{
  //     classObject(){
  //       return {
  //         active:this.isActive  &&  !this.error,

  //       }
  //     }
  //   }
  // });

  // // 数组语法
  // var App4 = new Vue({
  //   el:'#app4',
  //   data:{
  //     activeClass:"active",
  //     errorClass:"text-danger"
  //   }
  // });

  //绑定内联样式
  const App5 = new Vue({
    el:'#app5',
    data:{
      isStyle:{
        color:'red',
        fontSize:'30px'
      }
    }
  });

  var App6 = new Vue({
    el:'#app6',
    data:{
      currentIndex:0,
      items:[
        {number:1},
        {number:2},
        {number:3}
      ],
      olClass:{
        Ol:true
      },
      isClass:{
        Oli:true,
      },
      Oli:{
        backgroundColor:'blue'
      },
      olStyle:{
        display : 'flex',
        width:'1000px',
        
        // justifyContent:'spaceBetween'
        // justContent:'space-between'
      },
      isStyle:{
        width:'200px',
        height:'200px',
        backgroundColor:'red',
      }
    },
    methods: {
      handleClick(index){
        this.currentIndex =  index
      }
    },
  })
</script>
</html>